<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>酒店信息系统</title>
    <link rel="stylesheet" href="__PUBLIC__/new_select/chosen.css">
    <script type="text/javascript" src="__PUBLIC__/dateRange/dateRange.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/dateRange/dateRange.css"/>
    <link href="__PUBLIC__/boottable/css/vendor/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="__PUBLIC__/boottable/css/vendor/font-awesome.min.css" type="text/css" rel="stylesheet">
    <link href="__PUBLIC__/boottable/css/jquery.bdt.css" type="text/css" rel="stylesheet">
    <link href="__PUBLIC__/boottable/css/style.css" type="text/css" rel="stylesheet">
    <style>
        ::selection {
            background-color: #E13300;
            color: white;
        }
        ::moz-selection {
            background-color: #E13300;
            color: white;
        }
        ::webkit-selection {
            background-color: #E13300;
            color: white;
        }
        .btn03_2{
            background: url(__PUBLIC__/images/btn03_1.jpg) repeat-x;
            border: 0px;
            width: 66px;
            height: 30px;
            line-height:20px;
            color: #f5ffdf;
            cursor:pointer;
            font-family:'微软雅黑';
            margin-left:5px;
        }
        #table_box{display:none;margin-bottom:150px;}
        #table_main th{font-weight:bold;}
        #table_main td{font-weight:normal;}
        #table_dailyCount th{font-weight:bold;text-align: center;border:1px solid #808080;;height: 30px;}
        #table_dailyCount td{text-align: center;border:1px solid #808080;;height: 30px;}
        .btn03_2:hover{background: url(__PUBLIC__/images/btn03_2.jpg) repeat-x;}
        #table_box{width:900px;background:#fff;margin-top:60px;}
        #tb_head{clear:both;}
        #tb_title{font-size:18px;text-align:center;width:630px;height:30px;line-height:30px;float:left;margin:5px auto}
        #tb_close{cursor:pointer;text-align:center;width:70px;height:30px;float:left;padding-top:5px;}
        #oper_wait{display:none}
        #oper_wait div{background-image:url(__PUBLIC__/images/oper_wait.gif);width:124px;height:124px;margin:30px auto;}
        .i_orderd{position:relative;top:10px;}
        .sel_box{float:left;margin-left:5px;margin-bottom:5px;}
        #notice_box{height:50px;padding-left:20px;line-height:50px;color:#0B6DC5;display:none}
    </style>
</head>
<body>
{include file="public/head"}
</div>
<div class="content_2 clear">
{include file="admin/left"}
<div class="content_3 left">
<div class="content_3_wz"><img src="__PUBLIC__/images/dajt.png" >系统管理 > 入住统计</div>
<div class="content_3_xian" style='margin-bottom:20px;'></div>
<div class="content_3_ss clear">
    <form id='main_form'>
        <div id='main_nav_box' style='width:800px;'>
            <div class='sel_box'>
                <select id="selMonth" onchange="changemonth();" class="chosen-select" style="width:110px;" tabindex="2">
                    <option value="1">最近1个月</option>
                    <option value="3">最近3个月</option>
                    <option value="6">最近6个月</option>
                    <option value="0">按日期选择</option>
                </select>
            </div>
            <div class='sel_box' id='selDate' style='display:none;'>
                <div class="ta_date sel_box" id="div_date1">
                    <span class="date_title" id="date1"></span>
                    <a class="opt_sel" id="input_trigger1" href="#">
                        <i class="i_orderd"></i>
                    </a>
                </div>
                <div id="datePicker1"></div>
            </div>
            <div class='sel_box'>
                <select id="selType" onchange="changemonth();" class="chosen-select" style="width:65px;" tabindex="2">
                    <option value="XS">投影</option>
                    <option value="TV">电视</option>
                    <option value="PC">盒子</option>
                    <option value="all">所有</option>
                </select>
            </div>
            <div class='sel_box'>
                <select id="selCate" onchange="changeCate();" class="chosen-select" style="width:120px;" tabindex="2">
                    <option value="5">酒店入住日常</option>
                    <option value="1">酒店排行</option>
                    <option value="2">酒店入住率同比</option>

                </select>
            </div>
            <div class='sel_box' id='selGroupBox'>
                <select id="selGroup" onchange="selgroups();" data-placeholder="选择集团" class="chosen-select" style="width:160px;" tabindex="2">
                    <?php
  				if(!empty($groups)){
  					foreach($groups as $val){
  			?>
                    <option value="{$val['groupId']}">{$val['groupname']}</option>
                    <?php
  					}
  				}
  			?>
                </select>
            </div>
            <div class='sel_box' id='selHotelBox'>
            </div>
            <a href="#table_box" name="table_box"><input id='show_table_btn' type='button' value='详情' class='btn03_2' style='display:none;'/></a>
    </form>
    <div style='clear:both;margin-bottom:20px;'></div>
    <div id='notice_box'><h2></h2></div>
    <div id='oper_wait'><div></div></div>
    <div id='chart_box'></div>
    <div id="dailyCount">
        <table   border="0" cellpadding="10" width="850" >
            <tr >
                <td width="701"> <div id="checkinCount" style="min-width:350px;height:350px;margin-top: 10px;margin-left: 30px"></div></td>
            </tr>
            <tr></tr>
            <tr>
                <td width="200">
                    <table  cellpadding="1" cellspacing="1" id="table_dailyCount" style="margin-left: 30px;margin-top: 30px;">
                        <thead >
                        <tr class="tdcss">
                            <td width="201"  >名称</td>
                            <td width="150">数值</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr >
                            <td >可售房间总数</td>
                            <td id="totalRoomCount"></td>
                        </tr>
                        <tr >
                            <td  >已售房间总数</td>
                            <td id="checknoTotal"></td>
                        </tr>
                        <tr >
                            <td  >日均已售总数</td>
                            <td id="checknoPer"></td>
                        </tr>
                        <tr >
                            <td  >入住率</td>
                            <td id="occuratePerTotal"></td>
                        </tr>
                        </tbody>
                    </table></td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td >
                    <p style="margin-left: 30px;">注：可售房间总数=∑(单店房间数*出售天数)；已售房间总数=∑(单店出售房间总数)<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日均已售总数=∑(单店日均已售数)； &nbsp; &nbsp;&nbsp; 入住率=(∑单店入住率)/酒店数
                    </p>
                </td>
            </tr>


        </table>
    </div>
    <div id='table_box'  name="table_box">
        <div id='tb_head'>
            <div id='tb_title'>酒店入住率详情</div>
            <div id='tb_close'><input style='cursor:pointer' type='button' class='layui-btn layui-btn-warm' value='关闭' id='close_table_btn'/></div>
        </div>
        <table class="table table-hover" id="table_main">
            <thead>
            <tr style='cursor:default'>
                <th>酒店集团</th>
                <th>酒店名</th>
                <th>时间</th>
                <th>类型</th>
                <th>房间数</th>
                <th>入住数</th>
                <th>入住率</th>
                <th>PMS</th>
                <th>偏差</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<input type='hidden' id='totalRooms' value={$totalRooms} />
<script src="__PUBLIC__/new_select/chosen.jquery.js" type="text/javascript"></script>
<script src="__PUBLIC__/new_select/prism.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">

var config = {

    '.chosen-select'           : {},

    '.chosen-select-deselect'  : {allow_single_deselect:true},

    '.chosen-select-no-single' : {disable_search_threshold:10},

    '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},

    '.chosen-select-width'     : {width:"95%"}

}

for (var selector in config) {

    $(selector).chosen(config[selector]);

}
$(function(){
    selgroups();
//    	submitForm();
//    	$('#selHotelBox').hide();
    var d=new Date();
    var today = d.getFullYear()+"-"+ (d.getMonth()+1)+"-"+ d.getDate();
    var needdate =d.getFullYear()+"-"+ (d.getMonth()+1)+"-01";
    var dateRange1 = new pickerDateRange('date1', {
        isTodayValid : true,
        startDate : needdate,
        endDate : today,
        needCompare : false,
        defaultText : ' 至 ',
        autoSubmit : true,
        inputTrigger : 'input_trigger1',
        theme : 'ta',
        success : function(obj) {
            submitForm();
        }
    });
    $('#close_table_btn').on('click',function(){
        $('#table_box').hide();
    });
    $('#show_table_btn').on('click',function(){
        if($(this).attr('table_flag')=='ok'){
            $('#table_box').show();
        }
        if($(this).attr('table_flag')=='no'){
            alert('暂无数据');return false;
        }
    });
});
function selgroups(){
    var groupId = $('#selGroup option:selected').val();
    $.post('__APP__/admin/selHotelsByGp',{'groupId':groupId},function(data){
        if(data.result){
            var hotels = data.msg;
            //<option value="{$val['id']}">{$val['hotel']}</option>
            var html = '<select id="selHotel" onchange="submitForm();" data-placeholder="选择酒店" class="chosen-select" style="width:200px;" tabindex="2">';
            html += '<option value="all">所有酒店</option>';
            for(var i=0;i<hotels.length;i++){
                html += '<option value='+hotels[i].id+'>'+hotels[i].hotel+'</option>';
            }
            html += '</select>';
            $('#selHotelBox').html(html);
            var config = {
                '.chosen-select'           : {},

                '.chosen-select-deselect'  : {allow_single_deselect:true},

                '.chosen-select-no-single' : {disable_search_threshold:10},

                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},

                '.chosen-select-width'     : {width:"95%"}

            }
            $('#selHotel').chosen(config);
            submitForm();
        }else{
            alert(data.msg);return false;
        }
    },'json');
}
function changemonth(){
    var selMon = $('#selMonth option:selected').val();
    var d=new Date();
    var year = d.getFullYear();
    var month = d.getMonth();
    if(selMon=="0"){
        var sDate = $('#startDate').val();
        var eDate = $('#endDate').val();
        submitForm(sDate,eDate);
        $('#selDate').show();
    }else{
        $('#selDate').hide();
        submitForm();
    }
}
function changeCate(){
    var value=$('#selCate option:selected').val();
    if(value=="1"){
        $('#selHotelBox').hide();
        $('#dailyCount').hide();
        submitForm();
    }
    if(value=="2"){
        $('#selHotelBox').show();
        $('#dailyCount').hide();
        selgroups();
    }
    if(value=="5"){
        $('#selHotelBox').show();
        $('#dailyCount').show();
        selgroups();
        submitForm();
    }
}
function submitForm(){
    $('#table_box,#show_table_btn,#chart_box,#notice_box').hide();
    $('#oper_wait').show();
    var datas = new Object();
    datas.month =  $('#selMonth option:selected').val();
    datas.deviceType = $('#selType option:selected').val();
    datas.sdate = $('#startDate').val();
    datas.edate = $('#endDate').val();
    datas.cate = $('#selCate option:selected').val();
    datas.hotelId = $('#selHotel option:selected').val()?$('#selHotel option:selected').val():'all';
    datas.groupId = $('#selGroup option:selected').val();
    datas.groupName = $('#selGroup option:selected').html();
    datas.hotelName = $('#selHotel option:selected').html();
    datas.clientNo = $('#totalRooms').val();
    console.log(datas);
    $.post('__APP__/admin/getCountHotels',{'datas':datas},function(data){
        $('#oper_wait').hide();

        if(!data.result){
            alert(data.msg);
        }else{

            if(datas.cate=='5'){

                var list = data.msg;
//                console.log(list.checkno);
                if(list.length==0){
                    $('#notice_box h2').html('该时间段暂无数据');
                    $('#notice_box').show();
                    $('#dailyCount').hide();
                }else{
                    $('#selHotelBox').show();
                    $('#dailyCount').show();
                    $('#totalRoomCount').text(list.totalRoomCount);
                    $('#checknoTotal').text(list.checknoTotal);
                    $('#occuratePerTotal').text(list.occuratePerTotal);
                    $('#checknoPer').text(list.checknoPer);

                    $('#checkinCount').highcharts({
                        chart: {
                            zoomType: 'xy',
                            spacing:30
                        },
                        title: {
                            text: data.title
                        },
                        subtitle:{
                            text: data.subtitle
                        },
                        xAxis:[{
                            categories: list.x,
                            crosshair: true
                        }],
                        yAxis: [{ // Primary yAxis
                            min: 0,
                            labels: {
                                format: '{value} %',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            },
                            title: {
                                text: '入住率',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            }
                        }, { // Secondary yAxis
                            min: 0,
                            title: {
                                text: '入住数',
                                style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            },
                            labels: {
                                format: '{value} 间',
                                style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            }
                            ,
                            opposite: true
                        }],
                        tooltip: {
                            shared: true
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle',
                            borderWidth: 0
                        },
                        series: [{
                            name: '入住数',
                            type: 'column',
                            yAxis: 1,
                            data: list.checkno,
                            tooltip: {
                                valueSuffix: ' 间'
                            }
                        }, {
                            name: '入住率',
                            type: 'spline',

                            data: list.occurate,
                            tooltip: {
                                valueSuffix: '%'
                            }
                        }, {
                            name: '入住率平均值',
                            type: 'spline',

                            data: list.occuratePer,
                            tooltip: {
                                valueSuffix: '%'
                            }
                        }]
                    });

                }

            }else{
                if($('#selMonth option:selected').val()!='0'&&$('#selCate option:selected').val()=='2'){
                    var tds = data.tabledatas;
                    var types = [];
                    types['clientNo'] = "投影";
                    types['clientNoPc'] = "盒子";
                    types['clientNoTv'] = "电视";
                    if(tds.length>0){
                        var html = '';
                        for(var i=0;i<tds.length;i++){
                            for(var k in types){
                                if(typeof(tds[i].clientNo[k])=='undefined'){continue;}
                                html+='<tr><td groupId='+tds[i].groupId+'>'+tds[i].groupname+'</td>';
                                html+='<td hotelId='+tds[i].id+'>'+tds[i].hotel+'</td>';
                                html+='<td>'+tds[i].time+'</td>';
                                html+='<td>'+types[k]+'</td>';
                                html+='<td>'+tds[i].clientNo[k].roomsnum+'</td>';
                                html+='<td>'+tds[i].clientNo[k].checkno+'</td>';
                                html+='<td>'+tds[i].clientNo[k].occurate+'</td>';
                                html+='<td>'+tds[i].clientNo[k].pms+'</td>';
                                html+='<td>'+tds[i].clientNo[k].diff+'</td></tr>';
                            }
                        }
                        $('#table_main tbody').html(html);
                        $('#table_main').bdt({
                            showSearchForm: 0,
                            showEntriesPerPageField: 0,
                        });
                        $('#show_table_btn').attr('table_flag','ok');
                    }else{
                        $('#show_table_btn').attr('table_flag','no');
                    }
                    $('#show_table_btn').show();
                }

                var list = data.msg;

                if(list.length==0){
                    $('#notice_box h2').html('该时间段暂无数据');
                    $('#notice_box').show();
                }else{
                    $('#chart_box').highcharts({
                        chart: {
                            zoomType: 'xy',
                            width: 800,
                            height:500,
                            spacing:30
                        },
                        title: {
                            text: data.title,
                        },
                        subtitle:{
                            text: data.subtitle,
                        },
                        xAxis: [{
                            categories: list.x,
                            crosshair: true
                        }],
                        yAxis: [{ // Primary yAxis
                            min: 0,
                            labels: {
                                format: '{value} %',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            },
                            title: {
                                text: '入住率',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            }
                        }, { // Secondary yAxis
                            min: 0,
                            title: {
                                text: '入住数',
                                style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            },
                            labels: {
                                format: '{value} 间',
                                style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            },
                            opposite: true
                        }],
                        tooltip: {
                            shared: true
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'left',
                            x:0,
                            verticalAlign: 'top',
                            y: -10,
                            floating: true,
                            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                        },
                        series: [{
                            name: '入住数',
                            type: 'column',
                            yAxis: 1,
                            data: list.checkno,
                            tooltip: {
                                valueSuffix: ' 间'
                            }
                        }, {
                            name: '入住率',
                            type: 'spline',
                            data: list.occurate,
                            tooltip: {
                                valueSuffix: '%'
                            }
                        },list.newcnstr],
                    });
                    $('#chart_box').show();
                }
            }

        }
    },'json');
}
</script>
</div>
</div>
</div>
<script src="__PUBLIC__/boottable/js/vendor/jquery.sortelements.js" type="text/javascript"></script>
<script src="__PUBLIC__/boottable/js/jquery.bdt.js" type="text/javascript"></script>
</body>
</html>
